<template>
    <div class="search">
        <input @focus="search" :value="keywords" placeholder="請輸入建案名、位置或區域範圍" class="form-control search-input" type="search">
    </div>
</template>

<script>
    import bus from '../assets/js/bus.js'

    export default {
        name: 'search',
        props: ['keywords'],
        methods: {
            search() {
                bus.$emit('searching')
            }
        }
    }
</script>

<style scoped>
    .search{
        padding: .11rem .22rem;
        font-size: .26rem;
        background-color: #f7f7f7;
    }
    .search-input{
        background: url(  ) no-repeat;
        background-position: .2rem;
        background-color: white;
        height: .68rem;
        background-size: .2rem;
        font-size: .26rem;
        padding-left: .6rem;
        -webkit-appearance: none;
        border: 1px solid #eee;
    }
    .search-panel{
        position: absolute;
        top: 0;
        left: 0;
        background-color: #f5f5f5;
        z-index: 2;
    }
</style>
